const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
const ROOT = process.cwd();

const extractLibStyle = new ExtractTextPlugin({
  filename: 'css/vendor.[chunkhash:6].css',
  allChunks: true,
});

const extractProjectStyle = new ExtractTextPlugin({
  filename: 'css/[name].[chunkhash:6].css',
  allChunks: true,
});

module.exports = {
  mode: 'development',
  context: ROOT,
  entry: {
    // polyfill: ['babel-polyfill'],
    main: './src/index.js'
  },
  output: {
    filename: 'js/[name].[chunkhash:6].js',
    chunkFilename: 'js/[name].[chunkhash:6].js',
    path: path.resolve(ROOT, 'dist'),
    publicPath: './'
  },
  resolve: {
    modules: ['./src', './node_modules'],
    extensions:  ['.js', '.jsx', '.less']
  },
  module: {
    rules: [{
      test: /\.jsx?$/,
      loader: "babel-loader",
      exclude: /node_modules/
    },{
      test: /\.jsx?$/,
      use: {
        loader: "./customLoaders/test/index.js",
        options: {
          a: 1
        }
      },
      exclude: /node_modules/
    }, {
      test: /\.css$/,
      use: extractLibStyle.extract([
        'css-loader'
      ]),
      include: [path.resolve(ROOT, 'src/pages/')],
    }, {
      test: /\.css$/,
      use: extractProjectStyle.extract([
        'css-loader'
      ]),
      include: [path.resolve(ROOT, 'src/assets/')],
    }]
  },
  plugins: [
    extractProjectStyle,
    extractLibStyle,
    new CleanWebpackPlugin(['dist/'], {
      root: process.cwd(),
    }),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/index.html',
      minify: {
        removeAttributeQuotes: true,
      },
      chunksSortMode: 'dependency',
    }),
    new webpack.DllReferencePlugin({
      // context: path.resolve(__dirname, './static/js/polyfill-manifest.json'), 
      manifest: require(path.resolve(__dirname, './static/js/polyfill-manifest.json'))
    }),
    //这个主要是将生成的vendor.dll.js文件加上hash值插入到页面中。
    new AddAssetHtmlPlugin([{
      filepath: path.resolve(__dirname,'./static/js/polyfill.dll.js'),
      // outputPath: utils.assetsPath('js'),
      publicPath: path.posix.join(__dirname, 'static/js'),
      includeSourcemap: false,
      hash: true,
    }]),
    new ParallelUglifyPlugin({
      uglifyJS: {
        output: {
          beautify: false,
          comments: false,
        },
        compress: {
          warnings: false,
          drop_console: true,
        }
      }
    }),
  ],
}